<template>
  <div class="container mx-auto px-4 py-16">
    <div class="text-center">
      <h1 ref="title" class="mb-4 text-4xl font-bold text-gray-900 opacity-0">
        Welcome to Nuxt 3 + GSAP Animation
      </h1>
      <p ref="subtitle" class="mb-8 text-xl text-gray-600 opacity-0">
        Your project is ready for amazing animations!
      </p>
      <div class="flex justify-center space-x-4">
        <button
          ref="btnStart"
          class="translate-y-4 rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white opacity-0 transition-colors hover:bg-blue-700"
        >
          Get Started
        </button>
        <button
          ref="btnLearn"
          class="translate-y-4 rounded-lg border border-gray-300 bg-white px-6 py-3 font-semibold text-gray-900 opacity-0 transition-colors hover:bg-gray-50"
        >
          Learn More
        </button>
        <Button ref="btnShadcn" class="w-16 translate-y-4 opacity-0" variant="outline" size="icon">
          <LucideChevronRight class="h-4 w-4" />
        </Button>
        <!-- <Button ref="btnShadcn" class="opacity-0 translate-y-4" @click="$router.push('/honor')">
          <LucideMailOpen class="w-4 h-4 mr-2" /> honor
        </Button> -->
      </div>
    </div>
    <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-3">
      <div
        v-for="(box, index) in 3"
        :key="index"
        :ref="el => (boxes[index] = el)"
        class="scale-95 rounded-lg bg-white p-6 opacity-0 shadow-md"
      >
        <h3 class="mb-2 text-lg font-semibold">Feature {{ index + 1 }}</h3>
        <p class="text-gray-600">
          This is an example of GSAP animation with Nuxt 3 and Tailwind CSS.
        </p>
      </div>
    </div>

    <div class="mt-16 text-center">
      <NuxtLink
        to="/animations"
        class="inline-block rounded-lg bg-indigo-600 px-6 py-3 font-semibold text-white transition-colors hover:bg-indigo-700"
      >
        View More Animations
      </NuxtLink>
    </div>
  </div>
</template>

<script setup>
// References for animation elements
const title = ref(null)
const subtitle = ref(null)
const btnStart = ref(null)
const btnLearn = ref(null)
const btnShadcn = ref(null)
const boxes = ref([])

onMounted(() => {
  const { $gsap } = useNuxtApp()

  // Create a timeline for the intro animations
  const tl = $gsap.timeline({ defaults: { ease: 'power3.out' } })
  // console.log(btnShadcn.value.$el, $gsap)
  // Add animations to the timeline
  tl.to(title.value, { opacity: 1, duration: 0.8 })
    .to(subtitle.value, { opacity: 1, duration: 0.8 }, '-=0.4')
    .to(
      [btnStart.value, btnLearn.value, btnShadcn.value.$el],
      {
        opacity: 1,
        y: 0,
        duration: 0.6,
        stagger: 0.1,
      },
      '-=0.4'
    )
    .to(
      boxes.value,
      {
        opacity: 1,
        scale: 1,
        duration: 0.8,
        stagger: 0.15,
      },
      '-=0.2'
    )
})
</script>
